<template>
	<div class="content">
		<div class="history_content"  v-if="status===true">
			<div class="history_tittle_content">
				<div>
					<text class="history_tittle">搜索记录</text>
				</div>
				<div class="history_icon" >
					<icon class="icon" content="tb-delete-light" fontSize="38" @click="delHistory"></icon>
				</div>
			</div>
			<div class="history_list_content">
				<div :class="[isShow==true?'history_list_click':'history_list']">
					<div class="history_item" v-for="item in historyItem" :key="item" @click="loadProduct(item)">
						<text class="history_item_tittle">{{item}}</text>
					</div>
				</div>
				<div>
					<div @click="isClick" v-if="isShow==false">
						<icon class="icon selectIcon" content="tb-unfold" fontSize="38" ></icon>
					</div>
					<div @click="isClick" v-if="isShow==true">
						<icon class="icon selectIcons" content="tb-fold" fontSize="38"></icon>
					</div>

				</div>

			</div>
		</div>
		<div class="hot_contnt">
			<div class="history_tittle_content">
				<div>
					<text class="history_tittle">热门搜索</text>
				</div>
			</div>
			<div class="hot_list">
				<div class="history_item" v-for="item in seqList" :key="item" @click="loadProduct(item)">
					<text class="history_item_tittle">{{item}}</text>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import {
		list
	} from '../../../../api/seq.js'
	export default {
		name: 'searchHistory',
		data() {
			return {
				brandList: [],
				isProduct: false,
				products: [],
				productName: '',
				isShow: false,
				showSearch: false,
				seqList: []
			}
		},
		props:['historyItem','status'],
		created() { // 在实例创建完成后被立即调用
			this.loadSq()
		},
		methods: {
			loadProduct(data){
				this.$emit('historyClick',data)

			},
			delHistory(){
				this.$emit('removeItem')
			},
			   isClick() {
			      this.isShow = !this.isShow
			    },
			loadSq() {
				list({
					mchId: this.getGlobalData().mchId,
				}).then(res => {
					this.seqList = res.data

				})
			},
		},
		components: {},
	}
</script>

<style scoped>
	.content {
		padding-left: 20px;
		padding-right: 20px;
		margin-top: 52px;
	}

	.history_tittle_content {
		width: 695px;
		display: flex;
		height: 50px;
		flex-direction: row;
		justify-content: space-between;
	}

	.icon {
		width: 50px;
		height: 50px;
		color: rgba(42, 42, 54);
		opacity: 0.3;

	}

	.history_tittle {
		font-size: 24px;
		font-weight: 400;
		color: rgba(26, 26, 30, 1);
		opacity: 0.5;
	}

	.history_icon {
		font-size: 30px;
	}

	.hot_list {
		width: 730px;
		display: flex;
		flex-direction: row;
		margin-top: 31px;
		flex-wrap: wrap;
	}

	.history_list {
		width: 600px;
		display: flex;
		margin-top: 31px;
		flex-wrap: wrap;
		flex-direction: row;
		max-height: 140px;

	}
	.history_list_click {
		width: 600px;
		display: flex;
		flex-direction: row;
		margin-top: 31px;
		flex-wrap: wrap;
	}

	.history_list_content {
		display: flex;
		flex-direction: row;
		width: 695px;
		justify-content: space-between;
		position: relative;
		overflow: hidden;
	}

	.selectIcon {
		position: absolute;
		top: 5;
		right: 0;
	}

	.selectIcons {
		position : absolute ;
		right: 0;
		top:5;
	}



	.history_item {
		height: 50px;
		background-color: rgba(212, 215, 220, 0.2);
		padding-left: 23px;
		padding-right: 23px;
		border-width: 1px;
		border-style: solid;
		border-color: rgba(212, 215, 220, 1);
		border-radius: 1px;
		display: flex;
		max-width: 580px;
		margin-bottom: 22px;
		justify-content: center;
		white-space: nowrap;
		text-overflow: ellipsis;
		margin-right: 32px;
		align-items: center;

	}

	.history_item_tittle {
		lines:1;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 24px;
		font-weight: 400;
		color: black;
	}

	.hot_contnt {
		margin-top: 63px;
		width: 695px;
	}
</style>
